<template>
	<view class="page">
		<q-navbar title="我的预约" :isBack="true" backUrl="my" />
		<view class="page_header">
			<q-tabs :list="tablist" bgColr="#27b8a6" textColor="#fff" :isScroll='false' activeColor="#fff"
				:barWidth='120' @change="(l,v)=>{
					requestParams.pageNum = 1,
					requestParams.status=v,
					getList(1)
				}" />
		</view>
		<view class="page_container">
			<menuItem v-for="(v,i) in list" :key="i" :item="v" @Click="handeClick(v)" @resetting="getList(1)"
				@cancle='cancleYY' />
		</view>
		<u-modal v-model="show" title="预约单" :title-style="{color: 'red'}" :show-confirm-button="false"
			:mask-close-able="true" :content-style="{padding:'20rpx 40rpx 0'}">
			<u-form ref="form" :model="form" label-width="100px" disabled>
				<u-form-item label="状态">
					<dict-tag :style="{color: form.status==0?'#35c0f4':form.status==1?'#07c160':'#fcc527'}"
						:options="dict.type.jjxt_status" :value="form.status" />
				</u-form-item>
				<u-form-item label="单号" prop="number">
					{{ form.number }}
				</u-form-item>
				<u-form-item label="姓名" prop="name">
					{{ form.name }}
				</u-form-item>
				<u-form-item label="预约时间" prop="appointTime">
					{{ this.dayjs(form.appointTime).format('YYYY-MM-DD HH:mm:ss') }}
				</u-form-item>
				<u-form-item label="预约类型" prop="typeId">
					<dict-tag :options="dict.type.yylx_jh" :value="form.typeId" />
				</u-form-item>
				<u-form-item label="办理人" prop="jobUserName">
					{{ form.jobUserName || '暂无' }}
				</u-form-item>
				<u-form-item label="排队人数" prop="jobUserName" v-if="form.status!=1">
					{{ form.linUp !== -1 ? form.linUp : '暂无' }}
				</u-form-item>
				<u-form-item label="预计等待时间" prop="jobUserName" v-if="form.status!=1">
					{{ form.scheduled|| 0 }} 分钟
				</u-form-item>
				<u-form-item label="内容">
					{{ form.content }}
				</u-form-item>

			</u-form>
		</u-modal>
	</view>
</template>

<script>
	import menuItem from './components/menu-item.vue'
	export default {
		dicts: ['jjxt_status', 'yylx_jh'],
		components: {
			menuItem
		},
		props: {},
		data() {
			return {
				tablist: [{
					label: '已预约',
					value: 0
				}, {
					label: '已完成',
					value: 1
				}, {
					label: '待办理',
					value: 2
				}],
				list: [],
				requestParams: {
					pageSize: 10,
					pageNum: 1,
					status: 0,
					createBy: this.$s.get('userId'),
				},
				total: 0,
				loading: false,
				status: 'loadmore',
				show: false,
				form: {}
			}
		},
		watch: {},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {},
		onLoad(options) {},
		onShow() {
			this.getList(1)
		},
		methods: {
			async handeClick(e) {
				console.log('e', e);
				let res = await this.$api.findSingAppointmentForm(e.id)
				this.show = true
				this.form = res.data
			},
			cancleYY(id) {
				this.$confirm.default('确定取消预约吗？').then(res => {
					this.$api.delAppointmentForm(id).then(res => {
						this.getList(1)
					})
				}).catch(err => {
					return
				})
			},
			getList(e) {
				this.loading = true
				this.$api.findAppointmentForm(this.requestParams).then(res => {
					this.status = 'loadmore'
					console.log('我的预约', res.rows);
					if (e) {
						this.list = res.rows
						this.total = res.total
					} else {
						this.list.push(...res.rows)
					}
					this.loading = false
					if (this.list.length >= this.total) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				})
			},
		},
		// 加载
		onReachBottom() {
			if (!this.loading) {
				if (this.list.length >= this.total) return
				this.status = 'loading'
				this.requestParams.pageNum += 1
				this.getList()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #eaeaea;
	}
</style>